<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>YUI Browser History Manager - TabView Example</title>
    <link rel="stylesheet" type="text/css" href="../../../build/reset-fonts-grids/reset-fonts-grids.css"/>
    <link rel="stylesheet" type="text/css" href="../../../build/tabview/assets/tabview.css"/>
    <link rel="stylesheet" type="text/css" href="../../../build/tabview/assets/border_tabs.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/solution.css"/>
    <script src="../../../build/yahoo/yahoo-min.js"></script>
    <script src="../../../build/event/event-min.js"></script>
    <script src="../../../build/dom/dom-min.js"></script>
    <script src="../../../build/element/element-beta-min.js"></script>
    <script src="../../../build/tabview/tabview-min.js"></script>
    <script src="../../../build/history/history-experimental.js"></script>
  </head>
  <body>
    <script>

// The initially selected tab will be chosen in the following order:
//
// URL fragment identifier (it will be there if the user previously
// bookmarked the application in a specific state)
//
//         or
//
// "tab0" (default)

var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState( "tabview" );
var initialTabViewState = bookmarkedTabViewState || "tab0";

var tabView;

// Register our TabView module. Module registration MUST
// take place before calling YAHOO.util.History.initialize.
YAHOO.util.History.register( "tabview", initialTabViewState, function( state ) {
    // This is called after calling YAHOO.util.History.navigate, or after the user
    // has trigerred the back/forward button. We cannot discrminate between
    // these two situations.

    // "state" can be "tab0", "tab1" or "tab2".
    // Select the right tab:
    tabView.set( "activeIndex", state.substr(3) );
} );

// Subscribe to this event before calling YAHOO.util.History.initialize,
// or it may never get fired! Note that this is guaranteed to be fired
// after the window's onload event.
YAHOO.util.History.onLoadEvent.subscribe( function() {
    // Instantiate the TabView widget
    tabView = new YAHOO.widget.TabView( "demo" );
    tabView.addListener( "activeTabChange", handleTabViewActiveTabChange );

    // This is the tricky part... The onLoad event is fired when the user
    // comes back to the page using the back button. In this case, the
    // actual tab that needs to be selected corresponds to the last tab
    // selected before leaving the page, and not the initially selected tab.
    // This can be retrieved using getCurrentState:
    var currentState = YAHOO.util.History.getCurrentState( "tabview" );
    tabView.set( "activeIndex", currentState.substr(3) );
} );

function handleTabViewActiveTabChange( e ) {
    var currentState = YAHOO.util.History.getCurrentState( "tabview" );
    var newState = "tab" + this.getTabIndex( e.newValue );
    // The following test is crucial. Otherwise, we end up circling forever.
    // Indeed, YAHOO.util.History.navigate will call the module onStateChange callback,
    // which will call tabView.set, which will call this handler and it keeps
    // going from here...
    if ( newState != currentState )
        YAHOO.util.History.navigate( "tabview", newState );
}

// The call to YAHOO.util.History.initialize should ALWAYS be from within
// a script block located RIGHT AFTER the body tag (this seems to prevent
// an edge case bug on IE - IE seems to sometimes forget the history when
// coming back to a page, and the back - or forward button depending on the
// situation - is disabled...)
YAHOO.util.History.initialize( "../../../build/history/assets/blank.html" );

    </script>
    <div id="doc">
      <div id="hd">
        <img src="../assets/yui.gif" alt="YUI Logo" id="logo"/>
      </div>
      <div id="bd">
        <div id="demo" class="yui-navset">
          <ul class="yui-nav">
            <li class="selected"><a href="#lorem"><em>lorem</em></a></li>
            <li><a href="#ipsum"><em>ipsum</em></a></li>
            <li><a href="#dolor"><em>dolor</em></a></li>
          </ul>
          <div class="yui-content">
            <div id="lorem">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
            </div>
            <div id="ipsum">
              <ul>
                <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
              </ul>
            </div>
            <div id="dolor">
              <form action="#">
                <fieldset>
                  <legend>Lorem Ipsum</legend>
                  <label for="foo"><input id="foo" name="foo"></label>
                  <input type="submit" value="submit">
                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div id="ft">YUI Browser History Manager - TabView Example</div>
    </div>
  </body>
</html>
